<template>
  <div class="layout-container">
    <split-pane split="vertical" :min-percent="10" :default-percent="10" :max-percent="50">
      <template slot="paneL">
        <div class="left-container">
          <el-tree
            ref="tree"
            style="margin-top: 20px"
            class="filter-tree"
            :data="orgOption"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            highlight-current
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <!--可以根据情况，以数据类型来显示不同的图标或图片-->
              <i v-if="(data.children && data.children.length) || data.parentId === '0'" :class="node.expanded ?'co-icon-zg-folder-opened-fill' : 'co-icon-folder_opened'" />
              <i v-else class="el-icon-document" />
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </template>
      <template slot="paneR">
        <div class="right-container">
          <basic-page-vxe
            ref="basePage"
            list-api="findWellExploitWithImpl"
            del-api="deleteSysAreaById"
            :search-form="basicData.searchForm"
            :search-handle="basicData.searchHandle"
            :columns="basicData.columns"
            :is-auto="false"
            :search-other-data="basicData.searchOtherData"
            :valid-rules="basicData.validRules"
            :show-pagination="false"
          />
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
import { updateProdWellGeologies, findSysProdOrgAll } from '@/api/base'
import splitPane from 'vue-splitpane'
export default {
  name: '',
  components: {
    splitPane
  },
  directives: {},
  filters: {},
  data() {
    return {
      basicData: {
        columns: [
          { config: { title: '区块', field: 'wellAreaName' }},
          { config: { title: '井号', field: 'wellCommonName', width: '100px' }},
          // { config: { title: '更新日期', field: 'wellgeolCreateDate' }, type: 'edit', editType: 'date', editRender: { name: '$input', props: { type: 'date' }}},
          { config: { title: '投产时间', field: 'wellgeolProdTime' }, type: 'edit', editType: 'date', editRender: { name: '$input', props: { type: 'date' }}},
          { config: { title: '开发工艺', field: 'wellgeolInjectTech' }, type: 'edit', editRender: { name: 'input', attrs: { type: 'text' }}},
          { config: { title: '生产层段', field: 'wellgeolProdLayer' }, type: 'edit', editRender: { name: 'input', attrs: { type: 'text' }}},
          { config: { title: '油层厚度（m）', field: 'wellgeolOilThickness' }, type: 'edit', editRender: { name: '$input', props: { type: 'number' }}},
          { config: { title: '水平段长度（m）', field: 'wellgeolHorizontalLength' }, type: 'edit', editRender: { name: '$input', props: { type: 'number' }}},
          { config: { title: '渗透率（mD）', field: 'wellgeolPermeability' }, type: 'edit', editRender: { name: '$input', props: { type: 'number' }}},
          { config: { title: '地层温度（℃）', field: 'wellgeolFormationTemp' }, type: 'edit', editRender: { name: '$input', props: { type: 'number' }}},
          { config: { title: '地层压力（MPa）', field: 'wellgeolFormationPressure' }, type: 'edit', editRender: { name: '$input', props: { type: 'number' }}},
          { config: { title: '地层原油粘度（mPa.s）', field: 'wellgeolFormationOilViscosity' }, type: 'edit', editRender: { name: '$input', props: { type: 'number' }}},
          { config: { title: '单井控制储量（万吨）', field: 'wellgeolControlledReserves' }, type: 'edit', editRender: { name: '$input', props: { type: 'number' }}},
          { config: { title: '是否有底（水）', field: 'wellgeolWhetherBottom', align: 'center' }, type: 'edit', editRender: { name: '$select', options: [{ label: '是', value: 1 }, { label: '否', value: 0 }] }}
        ],
        validRules: {},
        searchOtherData: {
          orgId: null
        },
        searchForm: [
          { type: 'Date', label: '年份', prop: 'implYear', width: '180px', dateType: 'year', valueFormat: 'yyyy' }
        ],
        searchHandle: [
          { label: '保存', type: 'primary', icon: 'el-icon-check', permission: 'update', handle: () => { this.saveEvent() } },
          { label: '还原', type: 'primary', icon: 'el-icon-refresh-left', permission: 'update', handle: () => { this.revertEvent() } }
        ]

      },
      showDel: false,
      delInfo: {},
      typ: [],
      detail: {},
      roleIdOptions: [],
      orgIdOptions: [],
      orgName: '',
      temp: {
        id: undefined
      },
      orgOption: [],
      areaArr: [],
      defaultProps: {
        children: 'children',
        label: 'prodOrgName'
      }
    }
  },
  computed: {},
  created() {
    this.getType()
  },
  mounted() {
  },
  methods: {
    handleNodeClick(val) {
      this.basicData.searchOtherData.orgId = val.id
      this.$refs.basePage.getList()
    },
    getType() {
      findSysProdOrgAll().then((response) => {
        this.orgOption = response.data
        this.$nextTick(() => {
          if (response.data && response.data.length > 0) {
            this.$refs.tree.setCurrentKey(response.data[0].id)
            this.basicData.searchOtherData.orgId = response.data[0].id
            this.$refs.basePage.getList()
            this.temp.id = response.data[0].id
          }
        })
      })
    },
    // 刷新
    handleReset() {
      this.$refs.basePage.getList()
    },
    async saveEvent() {
      const updateRecords = this.$refs.basePage.getUpdateData()
      const valid = await this.$refs.basePage.validEvent()
      if (valid) {
        if (updateRecords.length > 0) {
          const arr = updateRecords.map((item) => {
            return {
              id: item.wellgeolId,
              wellgeolProdTime: item.wellgeolProdTime,
              wellgeolProdLayer: item.wellgeolProdLayer,
              wellgeolOilThickness: item.wellgeolOilThickness,
              wellgeolHorizontalLength: item.wellgeolHorizontalLength,
              wellgeolPermeability: item.wellgeolPermeability,
              wellgeolFormationTemp: item.wellgeolFormationTemp,
              wellgeolFormationPressure: item.wellgeolFormationPressure,
              wellgeolFormationOilViscosity: item.wellgeolFormationOilViscosity,
              wellgeolWhetherBottom: item.wellgeolWhetherBottom,
              wellgeolControlledReserves: item.wellgeolControlledReserves,
              wellgeolImplId: item.wellgeolImplId,
              wellgeolWellId: item.swId,
              wellgeolInjectTech: item.wellgeolInjectTech
            }
          })
          updateProdWellGeologies(arr).then(() => {
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success'
            })
            this.$refs.basePage.getList()
          })
        } else {
          this.$message({
            message: '暂无修改内容',
            type: 'warning'
          })
        }
      }
    },
    revertEvent() {
      const updateRecords = this.$refs.basePage.getUpdateData()
      if (updateRecords.length > 0) {
        this.$confirm('您确定要还原数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.basePage.revertData()
        })
      } else {
        this.$message({
          message: '暂无修改内容, 无须还原',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
.warning{
  text-align: center;
  font-size: 20px;
}
.el-icon-info{
  font-size: 30px;
  color: orange;
}
</style>
